<template>
	<div class="sw_tinymce_editor">
		<textarea ref="editorArea" v-model="editorContent"></textarea>
	</div>
</template>

<script>
import editoConfig from './config';
export default {
	name: 'swTinyEditor',
	props: {
		value: { type: String, default: '' },
		height: { type: Number, default: 200 },
		type: { type: String, default: 'default' },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return {
			tinymceInstance: null,
			editorContent: this.value
		};
	},
	watch: {
		value(val) {
			this.editorContent = val;
		},
		editorContent(val) {
			this.$emit('input', val);
		}
	},
	mounted() {
		this.initTinymce();
	},
	destroyed() {
		if (this.tinymceInstance) {
			this.tinymceInstance.destroy();
		}
	},
	methods: {
		initTinymce() {
			let target = this.$refs['editorArea'];
			let editorOption = {
				plugins: 'autoresize lists link anchor code wordcount image table visualchars visualblocks searchreplace preview pagebreak nonbreaking media insertdatetime fullscreen directionality autosave autolink advlist',
				toolbar: 'undo redo removeformat | bold italic underline strikethrough | fontsizeselect',
				height: this.height,
				autoresize_max_height: 600,
				autoresize_bottom_margin: 0,
				autoresize_min_height: 350,
				autoresize_on_init: true
			};
			new editoConfig(target, editorOption, (editor) => {
				this.tinymceInstance = editor;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_tinymce_editor::v-deep {
	position: relative;
	border-radius: 4px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	textarea {
		display: none;
	}
	.tox-tinymce {
		border: none;
	}
}
</style>
